<template>
  <div class="handled-items">
    <h1>我的已办</h1>
    <div class="list">
      <div v-for="item in handledItems" :key="item.id" class="item">
        <div class="item-content">
          <div class="item-title">{{ item.title }}</div>
          <button @click="viewDetails(item)" class="view-button">查看</button>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>详情信息</h2>
        <div v-html="selectedItemDetails"></div>
        <button @click="closeModal">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'MyHandledItems',
  setup() {
    const handledItems = ref([
      {id: 1, title: '请假申请', type: 'leave'},
      {id: 2, title: '加班申请', type: 'overtime'},
      {id: 3, title: '出警申请', type: 'patrol'},
      {id: 4, title: '出差申请', type: 'businessTrip'}, // 添加出差申请
      {id: 5, title: '销假申请', type: 'cancelLeave'}, // 添加销假申请
      {id: 6, title: '个人出国申请', type: 'personalOverseas'}, // 添加个人出国申请
      {id: 7, title: '离岗申请', type: 'resignation'}, // 添加离岗申请
      {id: 8, title: '交接申请', type: 'handover'}, // 添加交接申请
      {id: 9, title: '日常报销申请', type: 'reimbursement'}, // 添加日常报销申请
      {id: 10, title: '出差报销申请', type: 'tripReimbursement'}, // 添加出差报销申请
      {id: 11, title: '员工加班补助费申请', type: 'overtimeSubsidy'}, // 添加员工加班补助费申请
      {id: 12, title: '支付申请', type: 'payment'}, // 添加支付申请
      {id: 13, title: '会议招待费申请', type: 'entertainment'}, // 添加会议招待费申请
      {id: 14, title: '外协补助申请', type: 'externalSubsidy'}, // 添加外协补助申请
      {id: 15, title: '慰问金申请', type: 'condolencePayment'}, // 添加慰问金申请

    ]);
    const selectedItemDetails = ref(null);
    const showModal = ref(false); // 控制模态框显示的状态变量

    const viewDetails = (item) => {
      selectedItemDetails.value = createDetailsHtml(item.type,item); // 创建详情HTML
      showModal.value = true; // 显示模态框
    };

    const closeModal = () => {
      showModal.value = false; // 隐藏模态框
    };




    const createDetailsHtml = (type,item) => {
      let detailsHtml='';
      switch (type) {
        case 'leave':
          detailsHtml = `
            <h3>请假申请详情</h3>
            <p>姓名: ${item.name}</p>
            <p>性别: ${item.gender}</p>
            <p>前往地点: ${item.destination}</p>
            ...`;
          break;
        case 'overtime':
          detailsHtml = `
            <h3>加班申请详情</h3>
            <p>姓名: 李四</p>
            <p>加班类型: 工作日加班</p>
            ...`;
          break;
        case 'patrol':
          detailsHtml = `
            <h3>出警申请详情</h3>
            <p>申请人员: 王五</p>
            <p>出警地点: 市中心</p>
            <p>出警日期: 2024-05-23</p>
            <p>上午/下午: 下午</p>
            <p>出警事由: 紧急情况处理</p>
            <p>部门: 应急响应部</p>`;
          break;
        case 'businessTrip': // 处理出差申请的详情
          detailsHtml = `
            <h3>出差申请详情</h3>
            <p>出差人员: 赵六</p>
            <p>出差地点: 上海</p>
            <p>出差时间: 2024-06-01</p>
            <p>返回时间: 2024-06-05</p>
            <p>经费来源金额: 5000元</p>
            <p>交通工具: 高铁</p>
            <p>出差事由: 参加会议</p>
            <p>事由: 商务洽谈</p>`;
          break;
        case 'cancelLeave': // 处理销假申请的详情
          detailsHtml = `
            <h3>销假申请详情</h3>
            <p>申请人: 孙七</p>
            <p>申请部门: 研发部</p>
            <p>公休剩余天数: 5天</p>
            <p>销假日期: 请假单编号123456</p>
            <p>销假开始时间: 2024-06-10</p>
            <p>销假结束时间: 2024-06-20</p>`;
          break;
        case 'personalOverseas': // 处理个人出国申请的详情
          detailsHtml = `
            <h3>个人出国申请详情</h3>
            <p>姓名: 周八</p>
            <p>开始日期: 2024-07-01</p>
            <p>结束日期: 2024-07-15</p>
            <p>原因: 参加国际会议</p>
            <p>是否查看承诺书: 是</p>
            <p>性别: 男</p>
            <p>出生年月: 1990-01</p>
            <p>政治面貌: 党员</p>
            <p>工作单位: 国际合作部</p>
            <p>出国（境）类型: 公务</p>
            <p>职务（职称）: 经理</p>
            <p>涉密程度: 低</p>
            <p>护照号码: XXXXXXXX</p>
            <p>出国（境）目的: 交流学习</p>
            <p>出国（境）审批编号: 批123456</p>
            <p>组团单位: 国际交流中心</p>
            <p>前往国家（地区）: 法国</p>
            <p>出国（境）情况: 停留15天，团组其他人员5人</p>
            <p>国（境）外行程: 7月1日巴黎会议，7月5日访问企业</p>
            <p>附件: 护照扫描件.pdf</p>`;
          break;
        case 'resignation': // 处理离岗申请的详情
          detailsHtml = `
            <h3>离岗申请详情</h3>
            <p>部门: 人力资源部</p>
            <p>人员: 吴九</p>
            <p>身份证号: 123456789012345678</p>
            <p>专业: 人力资源管理</p>
            <p>入职日期: 2018-08-01</p>
            <p>离岗日期: 2024-08-31</p>
            <p>性别: 女</p>`;
          break;
        case 'handover': // 处理交接申请的详情
          detailsHtml = `
            <h3>交接申请详情</h3>
            <h4>基本信息</h4>
            <p>姓名: 郑十</p>
            <p>所在部门: IT部</p>
            <p>职务: 工程师</p>
            <p>人员类别: 全职</p>
            <p>离岗类别: 辞职</p>
            <h4>网管</h4>
            <p>门卡: 已归还</p>
            <p>其他设备: 笔记本电脑已归还</p>
            <p>备注: 无</p>
            <h4>档案室</h4>
            <p>借阅资料: 是</p>
            <p>已全部归还: 是</p>
            <h4>财务部</h4>
            <p>借款: 无</p>
            <p>还清: 不适用</p>
            <p>其他说明: 无</p>
            <h4>办公室</h4>
            <p>签订保密承诺书: 是</p>
            <h4>所属部门</h4>
            <p>交接全部资料: 是</p>
            <p>工作其他说明: 无</p>`;
          break;
        case 'reimbursement': // 处理日常报销申请的详情
          detailsHtml = `
            <h3>日常报销申请详情</h3>
            <h4>费用报销单</h4>
            <p>填报日期: 2024-08-01</p>
            <p>部门: 市场部</p>
            <p>姓名: 王十一</p>
            <p>报销事由: 参加展会</p>
            <p>报销金额: 1200元（小写）/ 壹仟贰佰元整（大写）</p>
            <h4>贴票据</h4>
            <p>票据图片: <!--<img src="path/to/invoice.jpg" alt="票据" />--></p>`;
          break;
        case 'tripReimbursement': // 处理出差报销申请的详情
          detailsHtml = `
            <h3>出差报销申请详情</h3>
            <h4>出差申请单</h4>
            <p>申请人: 钱多多</p>
            <p>出差地点: 广州</p>
            <p>出差日期: 2024-08-01</p>
            <p>返回日期: 2024-08-05</p>
            <p>经费来源（金额）: 3000元</p>
            <p>交通工具: 飞机</p>
            <p>出差事由: 客户会议</p>
            <h4>旅差费报销单</h4>
            <p>总金额: 3000元（小写）/ 三千元整（大写）</p>
            <p>开始日期: 2024-08-01</p>
            <p>结束日期: 2024-08-05</p>
            <p>出差地点: 广州</p>
            <p>车船费: 800元</p>
            <p>住宿费: 1200元</p>
            <p>途中补助费: 4天, 400元</p>
            <p>住勤费: 广州, 4天, 600元</p>
            <p>合计小写: 3000元</p>
            <h4>报销单据</h4>
            <p>票据图片:<!-- <img src="path/to/receipt1.jpg" alt="票据1" />--></p>
            <p>总金额: 3000元</p>
            <p>证明人: 张经理</p>
            <h4>补助</h4>
            <p>共计出差人数: 1人</p>
            <p>出差是否全程开车: 否</p>
            <p>交通补助: 400元</p>
            <p>伙食补助: 600元</p>`;
          break;
        case 'overtimeSubsidy': // 处理员工加班补助费申请的详情
          detailsHtml = `
            <h3>员工加班补助费申请详情</h3>
            <h4>费用申请信息</h4>
            <p>编外外聘人员数: 2人</p>
            <p>在岗人数: 10人</p>
            <p>未在岗人数: 休假2人, 脱产学习1人, 其他1人</p>
            <p>正常工作日加班总小时数: 40小时</p>
            <p>加班费总额: 2000元</p>
            <p>意见: 同意支付</p>
            <h4>加班明细表</h4>
            <p>姓名: 李四</p>
            <p>加班类型: 工作日</p>
            <p>加班时间: 4小时</p>
            <p>事由: 项目紧急开发</p>
            <p>加班日期: 2024-07-20</p>
            <h4>加班部门汇总表</h4>
            <p>姓名: 李四</p>
            <p>部门: 研发部</p>
            <p>月加班: 正常工作日20小时, 休息日10小时, 节假日10小时</p>
            <p>总计: 40小时</p>`;
          break;
        case 'payment': // 处理支付申请的详情
          detailsHtml = `
            <h3>支付申请详情</h3>
            <h4>付款信息</h4>
            <p>申请部门: 财务部</p>
            <p>经办人: 赵会计</p>
            <p>收款人: 张供应商</p>
            <p>付款金额: 5000元（小写）/ 伍仟元整（大写）</p>
            <p>付款事由: 采购办公用品</p>
            <p>类型: 货款支付</p>
            <p>月份: 2024年08月</p>
            <h4>明细单</h4>
            <p>员工加班字段说明: 姓名, 工作日(加班人数, 总时, 费用), 休息日(加班人数, 总时, 费用), 节假日(加班人数, 总时, 费用), 补助情况, 加班总数, 补助合计</p>`;
          break;
        case 'entertainment': // 处理会议招待费申请的详情
          detailsHtml = `
            <h3>会议招待费申请详情</h3>
            <p>活动接待负责人: 张经理</p>
            <p>申请部门: 市场部</p>
            <p>接待地点: 国际会议中心</p>
            <p>接待日期: 2024-09-10</p>
            <p>来访内容: 产品发布会</p>
            <p>接待对象: 合作伙伴</p>
            <p>接待对象人数: 10人</p>
            <p>陪同人员: 销售团队</p>
            <p>陪同人员人数: 5人</p>
            <p>后勤保障: 酒店住宿</p>
            <p>招待类型: 晚宴</p>
            <p>标准类型: 高级</p>`;
          break;
        case 'externalSubsidy': // 处理外协补助申请的详情
          detailsHtml = `
            <h3>外协补助申请详情</h3>
            <p>部门: 研发部</p>
            <p>经办人: 李工</p>
            <p>人员姓名: 王工</p>
            <p>日期: 2024-09-05</p>
            <p>时间段: 全天</p>
            <p>补助费: 500元</p>`;
          break;
        case 'condolencePayment': // 处理慰问金申请的详情
          detailsHtml = `
            <h3>慰问金申请详情</h3>
            <p>申请部门: 人力资源部</p>
            <p>经办人: 赵经理</p>
            <p>收款人: 员工家属</p>
            <p>开户行: 工商银行</p>
            <p>账号: 1234567890</p>
            <p>付款金额: 2000元（小写）/ 贰仟元整（大写）</p>
            <p>付款事由: 员工疾病慰问</p>
            <p>审批意见: 同意支付</p>
            <p>审批流程: 已完成</p>`;
          break;
          // 添加其他单据的详情处理...
        default:
          detailsHtml = '未知类型';
      }
      return detailsHtml;
    };

    return {
      handledItems,
      selectedItemDetails,
      showModal,
      viewDetails,
      closeModal
    };
  }
};
</script>

<style scoped>
.handled-items {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.item {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.item-content {
  display: flex;
  justify-content: space-between; /* 确保标题和按钮分别靠左和靠右显示 */
  align-items: center;
  width: 100%;
  padding: 10px 0; /* 增加上下内边距 */
}

.item-title {
  font-size: 16px;
  color: #333;
  flex-grow: 1; /* 允许标题占据剩余空间 */
  margin-right: 10px; /* 保持一定的右间距 */
}

.view-button {
  padding: 8px 15px; /* 略微减小按钮的内边距，使其不显得过于庞大 */
  margin-left: auto; /* 将按钮推向容器的末端 */
}

.view-button:hover {
  background-color: #0056b3;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 50%;
  max-height: 80vh; /* 限制模态框内容区域的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  animation: modal-open 0.5s forwards;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
}

.close:hover {
  color: #777;
}

@keyframes modal-open {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

</style>